<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.ib{
            display: inline-block;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            background-color: rgb(192, 247, 185);
        }
        .dis-none{
            display: none;
        }
        .vi{
            visibility: hidden;
        }
        .vi:hover+span{
            color: red;
        }
        .op{
            opacity: .0;
        }
        .op:hover+span{
            color: red;
        }
       .container{
           width: 400px;
           height: 400px;
           background-color: rgb(189, 226, 121);
           cursor: url("./img/Cursor.png"), auto;
       }
    </style>
    
</head>
<body>
    <div class="box">
        block
    </div>
    <div class="box dis-none">
        none
    </div>
    <div class="box ib">
        inline-block
    </div>
    <div class="box ib">
        inline-block
    </div>
    <div class="box vi">
        visibility
    </div>
    <span>测试文字</span>
    <div class="box op">
        opacity
    </div>
    <span>测试文字</span>
    <div class="box ib">
        inline-block
    </div>
    <div class="container">

    </div>
    <!-- 
        display:none,visibility:hidden,opacity:0 共同点和不同点
        共同点：都让元素在视觉上影藏。
        不同点：
            display:none，脱离文档流，之前的位置会被其他元素占据，相当于从网页中删除。
            visibility:hidden，未脱离文档流，元素隐身，不能响应事件，例如hover,active等
            opacity:0，未脱离文档流，元素隐身，可以响应事件。 
    -->
    <script>
        const vi = document.querySelector('.vi')
        const op = document.querySelector('.op')

        vi.onclick = function(){
            alert('haha')
        }
        op.onclick = function(){
            alert('haha')
        }
    </script>
    
</body>
</html>